<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>金融供需模型</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Input.css">
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">

<!--轮播-->

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="/js/index.js"></script>

<style>
    /*轮播*/
    /* Make the image fully responsive */
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }

    .box{
        width: 80%;height: 25%;
        background-color: #2a80eb;
        margin: 10px auto;
    }
    .session_box{
        width: 80%;height: 70%;
        background-color: white;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 1px auto;
    }
    .session{
        width: calc(25% - 2px);
        height: calc(30% - 5px);
        background-color: lightslategrey;
        margin-left: 2px;
        margin-top: 5px;
        /*background-image: url("/img/lo.gif");*/
    }
    .session_img{
        width: calc(100%);height:calc(100%)
    }
    .session_p{
        height: calc(10%);
        font-size: 10px;
        margin-top: 0px;
        color: gray;
        text-align: center;
    }
    .p_button{
        margin-left: 10px;
    }

</style>
<body>

<!--导航栏-->
<div th:replace="common :: navbar"></div>

<p style="margin-left: 10%;text-align: left;color: grey">
    <a  class="p_button" >教学模型</a>
    <a  href="/moreModel" >   >>more</a>
</p>

<section class="session_box" style="justify-content: left">
    <div class="session" th:each="info,infoStat : ${page.list}"  >
        <a th:href="@{/modelInfo(id=${info.id})}">
            <img class="session_img" th:src="${info.imgUrl==null?'/img/lo.png':info.imgUrl}"     onerror="this.src='/img/default.jfif'" >
        </a>
        <p class="session_p" style="font-size: 15px;color: black;text-align: center" th:text="${info.name}"></p>
        <p class="session_p"  th:text="${info.rule}"></p>
    </div>
</section>


<!-- 底部分页 -->
<form id="form" style="display: flex;justify-content: center" action="/moreModel" type="POST">
    当前页  （<a  th:text="${page.currentPage+1}"  />）
    <a style="color: #2a80eb" onclick="loadPage(- 1)" th:if="${page.currentPage > 0}">上一页</a>
    <a style="color: #2a80eb"  onclick="loadPage(1)" th:if = "${page.currentPage < (page.totalPage - 1)}">下一页</a>
    共      <a style="color: #f59b00"  th:text="${page.total}" />条|
    <a style="color: #f59b00"  th:text="${page.totalPage}" />页
    每页    <a style="color: #f59b00"  th:text="${page.pageSize}" />条

    <input type="hidden" name="pageSize" th:value="${page.pageSize}" />
    <input name="currentPage" id="currentPage" type="hidden" th:value="${page.currentPage}"  />
    <input name="flag" id="flag" type="hidden" value="0"   />
</form>


</section>




</body>
</html>